<template>
  <div class="calendar">
    <h4>工作日历</h4>
    <el-select v-model="year" placeholder="请选择" @change="changeDate">
      <el-option
        v-for="item in yearArr"
        :key="item"
        :label="item"
        :value="item"
      >
      </el-option>
    </el-select>
    <el-select v-model="month" placeholder="请选择" @change="changeDate">
      <el-option v-for="item in 12" :key="item" :label="item" :value="item">
      </el-option>
    </el-select>
    <el-button @click="gotoday">今日</el-button>

    <el-calendar v-model="now">
      <template #dateCell="{ date }">
        <span>{{ date | formatDate }}</span>
        <span class="xiu" v-if="isWeeked(date)">休</span>
      </template>
    </el-calendar>
  </div>
</template>

<script>
export default {
  name: "calendar",
  data() {
    return {
      yearArr: [],
      year: "",
      month: "",
      now: new Date(),
    };
  },
  methods: {
    gotoday(){
      this.year = new Date().getFullYear()
      this.month = new Date().getMonth() + 1
      this.changeDate()
    },
    getYearArr() {
      const pastY = new Date().getFullYear() - 10;
      const afterY = new Date().getFullYear() + 10;
      const arr = [];
      for (let i = pastY; i <= afterY; i++) {
        arr.push(i);
      }
      return (this.yearArr = arr);
    },
    changeDate() {
      const nowY = new Date().getFullYear();
      const nowM = new Date().getMonth() + 1;

      if (this.year === nowY && this.month === nowM) {
        this.now = new Date();
        return;
      }
      const str = `${this.year}-${this.month}-1`;
      this.now = new Date(str);
    },
    curretnYear() {
      this.year = new Date().getFullYear();
      this.month = new Date().getMonth() + 1;
    },
    isWeeked(v) {
      const date = new Date(v);
      const day = date.getDay();
      const y = date.getFullYear();
      const m = date.getMonth() + 1;

      // const now_y = new Date().getFullYear();
      // const now_m = new Date().getMonth() + 1;

      if (this.year !== y || this.month !== m) {
        return false;
      }

      if (day === 0 || day === 6) {
        return true;
      }
      return false;
    },
  },
  filters: {
    formatDate(value) {
      return value.getDate();
    },
  },
  created() {
    this.curretnYear();
    this.getYearArr();
  },
};
</script>

<style lang="scss" scoped>
.calendar {
  h4 {
    padding: 20px 0;
    color: rgb(60, 60, 60);
    border-bottom: 1px dashed rgb(220, 220, 220);
  }

  ::v-deep .el-calendar__header {
    display: none;
  }
  ::v-deep .el-calendar__body {
    th {
      font-weight: 700;
    }
    th:nth-child(6),
    th:nth-child(7) {
      color: #ff4a15;
    }
  }
  ::v-deep .el-calendar__body .el-calendar-table__row {
    .xiu {
      display: inline-block;
      width: 20px;
      height: 20px;
      line-height: 20px;
      text-align: center;
      color: #fff;
      background-color: #fb7c4d;
      border-radius: 50%;
      font-size: 12px;
      margin-left: 10px;
    }
    .current,
    .prev,
    .next {
      border: 0;
    }
    .current .el-calendar-day,
    .prev .el-calendar-day,
    .next .el-calendar-day {
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .is-today .el-calendar-day span {
      display: inline-block;
      width: 30px;
      height: 30px;
      line-height: 30px;
      text-align: center;
      color: #fff;
      background-color: #409eff;
      border-radius: 50%;
    }
  }
}
</style>